<template>
    <a-modal :visible="kamiVisble" title="登录" :footer='null' @cancel="handleCancel" class="model-content">
      <a-space direction="vertical" fill :size="24" align="center">
        <a-image :src="imgLogo" class="qr_code" width="100" />
        <div >关注公众号<a class="model-content-link">[pscgo百宝箱]</a>, 回复<a class="model-content-link">登录</a>获取验证码</div>
        <!-- <div>首次使用扫一扫免费获取卡密</div>
        <div>点击下方<span class="model_tip">【微信登录】</span>扫一扫可直接卡密验证！</div>
       -->
      </a-space>
      <a-form :model="form_card" :rules="rules" @submit="handleSubmit" class="model-form" :layout="inline"> 
        <a-space direction="horizontal" fill :size="24" align="center" justify="center" style="justify-content: center;">
          <a-form-item field="cardNumber" label="" no-style>
            <a-input v-model="form_card.cardNumber" placeholder="请输入验证码" style="width: 200px" />
          </a-form-item>
          <a-form-item no-style>
            <a-button html-type="submit" type="primary" long style="width:100px;">登录</a-button>
          </a-form-item>
        </a-space>
      </a-form>
    </a-modal>
</template>
<script setup>
import imgLogo from '@/assets/image.jpg'
import { defineProps,  reactive, defineEmits, watch, ref, onMounted } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { useUserStore } from '@/store.js';
// 定义组件的props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 你可以在这里定义其他需要的props
});

const rules = {
  cardNumber: [
        {
          required: true,
          message:'cardNumber is required',
        },
      ],
}

const form_card = reactive({
  cardNumber: ''
})

const userStore = useUserStore();
// 可以使用`props`中的`visible`来控制模态框的显示和隐藏
const kamiVisble = ref(false)

// 响应式引用props.visible
watch(props, (newVal) => {
  kamiVisble.value = newVal.visible;
});

onMounted(() => {
    kamiVisble.value = props.visible;
})

// 定义组件的方法
const handleSubmit = async (data) => {
  if(data.values.cardNumber?.length == 0) {
    Notification.warning('请输入验证码')
    return
  }
  // 点击确定按钮时的逻辑
  await window?.electron?.submitCard(data.values.cardNumber);
  userStore.setUserInfo({
    card_number: data.values.cardNumber
  });
  localStorage.setItem('card_number', data.values.cardNumber)
  emit('update:visible', false);
  // 这里可以添加提交卡密的逻辑
   // 关闭弹框 触发父组件关闭弹框事件   
};

const handleCancel = () => {
  // 点击取消按钮时的逻辑
  // 这里可以添加取消操作的逻辑
  // 通常需要隐藏模态框，可以通过$emit来通知父组件
  emit('update:close', false);
};

// 导入emit，以便能够向父组件触发事件
const emit = defineEmits(['update:visible']);
</script>
<style  scoped>
.model-content {
    display: flex;
    flex-flow: column;
    align-items:center;  
}
.qr_code {
    height: 80px;
    width: 80px;
}
.home_form {
    margin-top: 16px;
}
.model-form {
  margin-top: 20px;
}
.model-content-link{
  color: blue;
}

</style>